<template>
    <div style="padding: 30px">
        <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 6 }" :dataSource="data">
            <my-card style="width: 254px;height: 308px;padding: 30px 0">
                <div style="flex: 1;display: flex;align-items: center;justify-content: center">
                    <div style="background: #EAF6EC;width: 100px;height: 100px;border-radius: 50%;display: flex;justify-content: center;align-items: center">
                        <a-icon type="plus" style="font-size: 40px;color: #34AA44"/>
                    </div>
                </div>
            </my-card>
            <event-card></event-card>
            <a-list-item slot="renderItem">
                <event-big-card/>
            </a-list-item>
        </a-list>
    </div>
</template>

<script>
    import EventCard from '@/components/EventCard';
    const data = [
        {
            title: 'Title 1',
        },
        {
            title: 'Title 2',
        },
        {
            title: 'Title 3',
        },
        {
            title: 'Title 4',
        },
        {
            title: 'Title 5',
        },
        {
            title: 'Title 6',
        },
    ];
    import EventBigCard from '@/components/card/EventBigCard';
    export default {
        name: 'Check',
        components: {EventCard, EventBigCard},
        data () {
            return {
                data,
            };
        },
    };
</script>

<style scoped>

</style>
